{% extends '__base__.html' %} {% block title %}日志{% endblock %} {% block beforehead %}

<script>
    function initVM(data) {
        var vm = new Vue({
            el: '#vm',
            data: {
                blogs: data.blogs,
                page: data.page
            },
            methods: {
                edit_blog: function(blog) {
                    location.assign('/manage/blogs/edit?id=' + blog.id);
                },
                delete_blog: function(blog) {
                    if (confirm('确认要删除“' + blog.name + '”？删除后不可恢复！')) {
                        postJSON('/api/blogs/' + blog.id + '/delete', function(err, r) {
                            if (err) {
                                return alert(err.message || err.error || err);
                            }
                            refresh();
                        });
                    }
                }
            }
        });
        $('#vm').show();
    }

    $(function() {
        getJSON('/api/blogs', {
            page: '{{page_index}}'
        }, function(err, results) {
            if (err) {
                return fatal(err);
            }
            $('#loading').hide();
            initVM(results);
        });
    });
</script>

{% endblock %} {% block content %}

<div class="uk-width-1-1 uk-margin-bottom">
    <div class="uk-panel uk-panel-box">
        <ul class="uk-breadcrumb">
            <li><a href="/manage/comments">评论</a></li>
            <li class="uk-active"><span>日志</span></li>
            <li><a href="/manage/users">用户</a></li>
        </ul>
    </div>
</div>

<div id="error" class="uk-width-1-1">
</div>

<div id="loading" class="uk-width-1-1 uk-text-center">
    <span><i class="uk-icon-spinner uk-icon-medium uk-icon-spin"></i> 正在加载...</span>
</div>

<div id="vm" class="uk-width-1-1">
    <a href="/manage/blogs/create" class="uk-button uk-button-primary"><i class="uk-icon-plus"></i> 新日志</a>

    <table class="uk-table uk-table-hover">
        <thead>
            <tr>
                <th class="uk-width-5-10">标题 / 摘要</th>
                <th class="uk-width-2-10">作者</th>
                <th class="uk-width-2-10">创建时间</th>
                <th class="uk-width-1-10">操作</th>
            </tr>
        </thead>
        <tbody>
            <tr v-repeat="blog: blogs">
                <td>
                    <a target="_blank" v-attr="href: '/blog/'+blog.id" v-text="blog.name"></a>
                </td>
                <td>
                    <a target="_blank" v-attr="href: '/user/'+blog.user_id" v-text="blog.user_name"></a>
                </td>
                <td>
                    <span v-text="blog.created_at.toDateTime()"></span>
                </td>
                <td>
                    <a href="#0" v-on="click: edit_blog(blog)"><i class="uk-icon-edit"></i>
                        <a href="#0" v-on="click: delete_blog(blog)"><i class="uk-icon-trash-o"></i>
                    </td>
                </tr>
            </tbody>
        </table>

        <div v-component="pagination" v-with="page"></div>
    </div>

{% endblock %}